<template>
  <Card title="项目经历" @add="handleAdd()">
    <PI v-for="item in seekerStore.project_experiences" :data="item" @edit="handleEdit"></PI>
  </Card>

  <MeModal ref="editPERef" width="600px" @ok="handleEditSave()">
    <n-form ref="PEFormRef" :model="form" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi label="项目名称" path="project_name" :span="12">
          <n-input v-model:value="form.project_name" maxlength="20" />
        </n-form-item-gi>
        <n-form-item-gi label="公司名称" path="company_name" :span="12">
          <n-input v-model:value="form.company_name" maxlength="20" />
        </n-form-item-gi>
        <n-form-item-gi label="项目职务" path="position_name" :span="12">
          <n-input v-model:value="form.position_name" maxlength="20" />
        </n-form-item-gi>
        <n-form-item-gi label="时间" path="time" :span="12">
          <n-date-picker
            v-model:formatted-value="form.time"
            type="monthrange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </n-form-item-gi>
        <n-form-item-gi label="项目描述" path="description" :span="24">
          <n-input
            v-model:value="form.description"
            type="textarea"
            :placeholder="desc_placeholder"
            maxlength="1000"
          />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </MeModal>
</template>

<script setup>
import seekerApi from '@/api/seeker'
import { MeModal } from '@/components'
import { useSeekerStore } from '@/store'
import { useForm, useModal } from '@/composables'
import Card from '../card.vue'
import PI from './projectExperienceItem.vue'
const seekerStore = useSeekerStore()
seekerStore.getProjectExperience()

const rules = {
  project_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  company_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  position_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  description: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  time: {
    type: 'array',
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
}

const desc_placeholder = `描述该项目，展示你的项目经验
例如：
1.项目背景
2.项目目标
3.项目概述
4.遇到的项目难点和解决方案`

const [editPERef] = useModal()
const [PEFormRef, form, PEValidation] = useForm({})

function handleEdit(id) {
    console.log(id);
  const value = form.value
  const pe = seekerStore.project_experiences.find((o) => o.id === id)
  value.id = id
  value.time = [pe.start_time, pe.end_time]
  value.project_name = pe.project_name
  value.company_name = pe.company_name
  value.position_name = pe.position_name
  value.description = pe.description
  editPERef.value.open({ title: '编辑项目经历信息' })
}

function handleAdd() {
  const value = form.value
  value.id = null
  value.time = null
  value.project_name = null
  value.company_name = null
  value.position_name = null
  value.description = null
  editPERef.value.open({ title: '添加项目经历信息', okText: '添加' })
}

async function handleEditSave() {
  await PEValidation()
  form.value.seeker_id = seekerStore.seeker.seeker_id
  form.value.start_time = form.value.time[0]
  form.value.end_time = form.value.time[1]
  await seekerApi.saveProjectExperience(form.value)
  $message.success('保存成功')
  seekerStore.getProjectExperience()
}
</script>
